<template>
  <div class="standardSearch">
   <div class="card">
     <el-form label-width="80px">
       <el-form-item label="模板下载">
         <el-button
           size="mini"
           type="primary"
           @click="handleExportEnterprise">
           点击下载
         </el-button>
       </el-form-item>
       <el-form-item label="文件上传">
         <el-upload
           class="upload-demo"
           drag
           ref="fileUpload"
           :action="uploadFileUrl"
           :headers="headers"
           :multiple="false"
           :show-file-list="false"
           :before-upload="handleBeforeUpload"
           :on-error="handleUploadError"
           :on-success="handleUploadSuccess">
           <i class="el-icon-upload"></i>
           <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
           <div class="el-upload__tip" slot="tip">
             <p class="attentionInfo">
               1、仅支持xlsx文件格式，文件条数不得超过50000条；
             </p>
             <p class="attentionInfo">
               2、上传表格时，需严格按照下载模式，根据模版表头的文字修改；
             </p>
             <p class="attentionInfo">
               3、输出内容为，区间字段；
             </p>
           </div>
         </el-upload>
       </el-form-item>
     </el-form>
     <el-alert
       v-if="resultParams.id"
       show-icon
       :closable="false"
       type="success">
       <template #title>
         <span>本次查询结果{{resultParams.sum}}条，点击查看</span>
         <el-button
           @click="handleCheckDetail"
           type="text">
           点击查看
         </el-button>
       </template>
     </el-alert>
   </div>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";
import router from '@/router';
export default {
  data() {
    return {
      //上传相关
      fileType: [ "xls", "xlsx" ],
      fileSize: 35,
      uploadFileUrl: "http://query.anjieke.cn/prod-api/enterprise/importData?type=1", // 上传文件服务器地址
      headers: { Authorization: "Bearer " + getToken() },
      resultParams: {
        sum: 0,
        id: undefined
      }
    }
  },
  methods: {
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      this.resultParams = { sum: 0, id: undefined }
      // 校检文件类型
      const fileName = file.name.split('.');
      const fileExt = fileName[fileName.length - 1];
      const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
      if (!isTypeOk) {
        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
        return false;
      }
      // 校检文件大小
      const isLt = file.size / 1024 / 1024 < this.fileSize;
      if (!isLt) {
        this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
        return false;
      }
      this.$modal.loading("正在上传文件，请稍候...");
      return true;
    },
    // 上传失败
    handleUploadError(err) {
      this.$modal.msgError("上传文件失败，请重试");
      this.$modal.closeLoading();
      this.resultParams = { sum: 0, id: undefined }
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.$modal.closeLoading();
        const { sum, id } = res.data;
        this.resultParams = { sum, id }
      } else {
        this.$modal.closeLoading();
        this.$modal.msgError(res.msg);
        this.$refs.fileUpload.handleRemove(file);
        this.resultParams = { sum: 0, id: undefined }
      }
    },
    handleExportEnterprise() {
      const params = { ...this.searchParams };
      this.download('/enterprise/template', params, `下载模版.xlsx`)
    },
    handleCheckDetail() {
      const id = this.resultParams.id;
      router.push({ path: '/resultSearch', query: { id } });
    }
  }
}
</script>
<style lang="scss" scoped>
div.card{
  padding: 14px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #f1f8fe;
  p {
    height: 26px;
    line-height: 26px;
    margin: 0;
  }
}
</style>
